import React, { useEffect,useState } from 'react'
import './bksl.css'
import { UploadOutlined  } from '@ant-design/icons';
import { Button,Input,Select,Upload } from 'antd';
import {getList,addPrepar} from '../request/instance'
import { useNavigate } from 'react-router-dom';
import moment from 'moment';
const App = function () {
    let nva =useNavigate()
    let [teacher,setteacher]=useState([])
    let [clas,setclas]=useState([])
    let [discipline,setdiscipline]=useState([])
    let [grade,setgrade]=useState([])
    let [grade1,setgrade1]=useState('')//年级
    let [semester1,setsemester1]=useState('')//班级
    let [discipline1,setdiscipline1]=useState('')//学科
    let [volume1,setvolume1]=useState('')//册次
    let [version1,setversion1]=useState('')//版本
    let [course1,setcourse1]=useState('')//教学章节
    let [knowledge1,setknowledge1]=useState('')//涉及知识点
    let [name1,setname1]=useState('')//备课名称
    let [bktype1,setbktype1]=useState('')//备课类型
    let [file1,setfile1]=useState('')//上传文件
    let [teacher1,setteacher1]=useState('')//教师名称
    let rlist=['校长上传','年级主任上传','班主任上传','督察上传']
    const queren=()=>{//确认事件
        let data= moment().format('YYYY-MM-DD');
        let source=localStorage.getItem("rid")?rlist[JSON.parse(localStorage.getItem("rid"))+1]:''
        addPrepar({"grade":grade1,"semester":semester1,"discipline":discipline1,
            "volume":volume1,"version":version1,"course":course1,"knowledge":knowledge1,
            "name":name1,"bktype":bktype1,"file":file1,"teacher":teacher1,"data":data,"source":source})
        nva('/grbk')//跳转

    }
    useEffect(() => {
        getList().then((ren)=>{
            let a=[]
            let b=[]
            let c=[]
            let d=[]
            ren.data.teacher.forEach(i => {
                a.push({'value':i.name,'label':i.name})
            });
            ren.data.clas.forEach(i => {
                b.push({'value':i.class,'label':i.class})
            });
            ren.data.discipline.forEach(i => {
                c.push({'value':i.discipline,'label':i.discipline})
            });
            ren.data.grade.forEach(i => {
                d.push({'value':i.grade,'label':i.grade})
            });
            setteacher(a)
            setclas(b)
            setdiscipline(c)
            setgrade(d)
        })
    }, [])
      const props = {
        name: 'file',
        action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
        headers: {
          authorization: 'authorization-text',
        },
        onChange(info) {
          if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
          }
          if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
          } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
          }
        },
      };
    return <>
        <div className='main'>
            <div className='box'>
                <div className='box_div2'>
                <table width='1100px' border='0' cellPadding='10' cellSpacing='0'>
                    <tbody>
                        <tr>
                            <td colSpan='6'><b style={{backgroundColor:'rgb(0, 176, 252)',color:"rgb(0, 176, 252)"}}>|</b> 教材信息</td>
                        </tr>
                        <tr>
                            <td >年级</td>
                            <td ><Select
                            defaultValue=""
                            style={{ width: 200 }}
                            onChange={(e)=>{
                                setgrade1(e)
                            }}
                            options={grade}
                            /></td>
                            <td >班级</td>
                            <td ><Select
                            defaultValue="请选择班级"
                            style={{ width: 200 }}
                            onChange={(e)=>{
                                setsemester1(e)
                            }}
                            options={clas}
                            /></td>
                            <td >学科</td>
                            <td ><Select
                            defaultValue="请选择学科"
                            style={{ width: 200 }}
                            onChange={(e)=>{
                                setdiscipline1(e)
                            }}
                            options={discipline}
                            /></td>
                        </tr>
                        <tr>
                            <td >版本</td>
                            <td ><Select
                            defaultValue="请选择版本"
                            style={{ width: 200 }}
                            onChange={(e)=>{
                                setversion1(e)
                            }}
                            options={[
                                { value: '人教版', label: '人教版' },
                                { value: '冀教版', label: '冀教版' },
                            ]}
                            /></td>
                            <td >册次</td>
                            <td colSpan='3'><Select
                            defaultValue="请选择册次"
                            style={{ width: 200 }}
                            onChange={(e)=>{
                                setvolume1(e)
                            }}
                            options={[
                                { value: '上册', label: '上册' },
                                { value: '下册', label: '下册' },
                            ]}
                            /></td>
                         </tr>
                        <tr>
                            <td >教学章节</td>
                            <td colSpan='5'>
                                <textarea name="" id="" style={{width:'400px',height:'80px'}}
                                onChange={(e)=>{
                                    setcourse1(e.target.value);
                                }}></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td >教师名称</td>
                            <td colSpan='5'>
                            <Select
                            defaultValue="请选择教师名称"
                            style={{ width: 200 }}
                            onChange={(e)=>{
                                setteacher1(e)
                            }}
                            options={teacher}
                            />
                            </td>
                        </tr>
                        <tr>
                            <td >涉及知识点</td>
                            <td colSpan='5'>
                            <Input placeholder='请输入涉及知识点' onChange={(e)=>{
                                setknowledge1(e.target.value)
                            }}/>
                            </td>
                        </tr>
                        <tr>
                            <td colSpan='6'><b style={{backgroundColor:'rgb(0, 176, 252)',color:"rgb(0, 176, 252)"}}>|</b>  备课内容</td>
                        </tr>
                        <tr>
                            <td>备课名称</td>
                            <td><Input placeholder='请输入备课名称' 
                            onChange={(e)=>{
                                setname1(e.target.value)
                            }}/></td>
                            <td>备课类型</td>
                            <td colSpan='3'><Select
                            defaultValue="请选择备课类型"
                            style={{ width: 200 }}
                            onChange={(e)=>{
                                setbktype1(e)
                            }}
                            options={[
                                { value: '教案', label: '教案' },
                                { value: '导学案', label: '导学案' },
                                { value: '课件', label: '课件' }
                            ]}
                            /></td>
                        </tr>
                        <tr>
                            <td>上传文件</td>
                            <td colSpan='5'>
                                <Upload {...props}>
                                    <Button icon={<UploadOutlined />}>上传文件</Button>
                                </Upload>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <Button color="primary" variant="outlined"
                                onClick={()=>{
                                    nva('/grbk')//跳转
                                }}
                                >取消</Button>
                            </td>
                            <td>
                                <Button color="primary" variant="solid"
                                onClick={queren}
                                >确定</Button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                </div>
            </div>
        </div>
    </>
}

export default React.memo(App);